<template>
    <div class="poster_box">
        <poster-settings
            ref="posterSettingsRefs"
            v-model="formData.poster"
            default-url="https://static.scrm.keyid.cn/assets/images/lottery/haibao.png" />
        <div class="right_box">
            <poster-phone
                ref="activityPhoneRef"
                v-model:url="formData.poster.absolute_url"
                class="poster-phone"
                :poster-head="formData.poster.avatar_type"
                :poster-head-switch="formData.poster.avatar_flag"
                :poster-nickname-color="formData.poster.nickname_color"
                :poster-nickname-size="formData.poster.nickname_size"
                :poster-nickname-switch="formData.poster.nickname_flag"
                :poster-desc-color="formData.poster.desc_color"
                :poster-desc-switch="formData.poster.desc_flag"
                :poster-desc-content="formData.poster.desc"
                :poster-desc-size="formData.poster.desc_size">
                <div
                    v-show="formData.luckywheel == 0 && formData.poster.poster_type === 0"
                    id="my-lucky"
                    class="mylucky"></div>
            </poster-phone>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, nextTick } from 'vue';
import { ElMessage } from 'element-plus';
import { uploadFile2 } from '@/api/common';
import PosterSettings from '@/components/zw/activity/poster-settings/index.vue';
import PosterPhone from '@/components/zw/phonePreview1.0/activityPhonePreview/posterPhone/index.vue';

import { LuckyWheel } from 'lucky-canvas';
const formData = ref({
    luckywheel: 0, //判断大转盘是否显示
    // 这里是公共组件的字段
    poster: {
        poster_type: 0, //0: 默认海报， 1: 海报库， 2: 本地上传
        poster_id: undefined, //海报库中海报id
        absolute_url: 'https://static.scrm.keyid.cn/assets/images/lottery/haibao.png', //海报图片url
        poster_absolute_url: '', // 海报库中海报url
        local_absolute_url: '', // 本地海报上传url
        avatar_flag: 1, //是否用户头像 1: 打开， 2: 关闭
        avatar_type: 1, //头像展示类型  1: 圆形, 2: 方形
        nickname_flag: 1, //是否用户昵称  1: 打开， 2: 关闭
        nickname_color: '#ffffff', //用户昵称颜色
        nickname_size: 14, //用户昵称字体大小
        desc_flag: 1, //是否描述 1: 打开， 2: 关闭
        desc_color: '#ffffff', //描述颜色
        desc_size: 12, //描述字体大小
        desc: '' //描述内容
    }
});
// 合成图片的方法
const activityPhoneRef = ref<any>(null);
const onExport = async (options = {}) => {
    await activityPhoneRef.value.convertToImage();
};

const initRewardConfig = (rewardLength: number) => {
    switch (rewardLength) {
        case 2:
        case 4:
            return {
                bg: ['#ffffff', '#ff6b00'],
                font: ['#33302D ', '#ffffff'],
                fontSize: '20px'
            };
        case 6:
        case 8:
            return {
                bg: ['#ff6b00', '#ffffff'],
                font: ['#ffffff', '#33302D'],
                fontSize: '14px'
            };
        case 3:
            return {
                bg: ['#ffffff', '#ff6b00', '#F8C77E'],
                font: ['#33302D', '#ffffff', '#33302D'],
                fontSize: '20px'
            };
        case 5:
            return {
                bg: ['#ffffff', '#ff6b00', '#ffffff', '#F8C77E', '#ff6b00'],
                font: ['#33302D', '#ffffff', '#33302D', '#33302D', '#ffffff'],
                fontSize: '20px'
            };
        case 7:
            return {
                bg: ['#ff6b00', '#ffffff', '#ff6b00', '#ffffff', '#ff6b00', '#ffffff', '#F8C77E'],
                font: ['#ffffff', '#33302D', '#ffffff', '#33302D', '#ffffff', '#33302D', '#33302D'],
                fontSize: '14px'
            };
    }
};
/** blob格式转化成base64..
 * @param blob {blob} blob文件
 * @return {String} 转义后的base64..
 */
function imageUrlToBase64(url) {
    return new Promise((resolve, reject) => {
        const homeImage = new Image();
        // 解决跨域问题
        homeImage.setAttribute('crossOrigin', 'anonymous');
        homeImage.src = url;
        //homeImage.onload为异步加载
        homeImage.onload = () => {
            const canvas = document.createElement('canvas');
            canvas.width = homeImage.width;
            canvas.height = homeImage.height;
            const context = canvas.getContext('2d');
            context.drawImage(homeImage, 0, 0, homeImage.width, homeImage.height);
            const quality = 0.8;
            // 这里的dataurl就是base64类型
            const dataURL = canvas.toDataURL('image/png', quality);
            resolve(dataURL);
        };
    });
}
const setPosition = (val: any) => {
    if (activityPhoneRef.value) {
        activityPhoneRef.value.formData.position = val;
    }
};
const getPostersInfo = () => {
    return activityPhoneRef.value ? activityPhoneRef.value.formData : {};
};
const rewardImage2Base64 = async (reward_info: Array<any>) => {
    const result: Array<any> = [];
    for (const iterator of reward_info) {
        const reward_image = await imageUrlToBase64(iterator.reward_image);
        result.push({ ...iterator, reward_image });
        iterator;
    }
    return result;
};

let myLucky = null;
const initLuckyWheel = async (reward_info: Array<any>) => {
    document.querySelector('#my-lucky')?.children[0]?.remove();
    const { font, fontSize, bg }: any = initRewardConfig(reward_info.length);
    const imgSize = reward_info.length > 4 ? 40 : 48;
    const top = reward_info.length > 4 ? '80%' : '90%';
    reward_info = await rewardImage2Base64(reward_info);
    const config = {
        width: '600px',
        height: '600px',
        blocks: [
            {
                padding: '70px',
                imgs: [
                    {
                        src: '/static/poster/draw-bg.png',
                        top: 20,
                        left: -14,
                        width: '100%',
                        height: '100%'
                    }
                ]
            }
        ],
        prizes: reward_info.map((v, i) => {
            const { reward_type, reward_image } = v;
            return {
                fonts: [
                    {
                        text: v.reward_title,
                        top,
                        fontSize: v.reward_title.length > 4 ? fontSize : '20px',
                        fontColor: font[i] || font[i % 2]
                    }
                ],
                background: bg[i] || bg[i % 2],
                imgs: [
                    {
                        src: reward_image,
                        width: imgSize * 2,
                        height: imgSize * 2,
                        top: '10%'
                    }
                ],
                ...v
            };
        }),
        buttons: [
            {
                pointer: true,
                radius: '45%',
                imgs: [
                    {
                        src: '/static/poster/draw-btn.png',
                        top: -60,
                        width: 120,
                        height: 140
                    }
                ]
            }
        ]
    };
    myLucky = new LuckyWheel('#my-lucky', config);
};
defineExpose({
    formData,
    initLuckyWheel,
    onExport,
    setPosition,
    getPostersInfo
});
</script>

<style lang="scss" scoped>
.radio_item {
    margin-bottom: 0;
}

// 颜色选择器
:deep(.el-color-picker__icon) {
    color: transparent;
}

:deep(.el-color-picker__empty) {
    font-size: 0;
}

:deep(.el-color-picker__trigger) {
    border: none;
}

:deep(.el-color-picker__color) {
    // border: none;
    border: 1px solid #eeebee;
}

.desc {
    width: 60%;
    margin-top: 16px;
}

.poster_box {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    margin-left: 4px;
    margin-bottom: 20px;

    .right_box {
        display: grid;
        place-content: center;

        .mylucky {
            width: 300px !important;
            height: 300px !important;
            margin-left: 30px;
            position: absolute;
            top: 260px;

            :deep(canvas) {
                width: 300px !important;
                height: 300px !important;
                transform-origin: left top !important;
                transform: scale(1) !important;
            }
        }
    }
}
</style>
